<template>
  <div
    class="flex items-center justify-center border-solid border rounded-lg bg-gray-50 p-[0.1rem]"
    :ref="forwardRef"
  >
    <div
      class="portrait border-solid border h-3 w-3 ml-2 border-solid border rounded-full overflow-hidden"
    >
      <img :src="item.portrait" alt="" class="bg-green-400 w-full h-full" />
    </div>
    <div class="name flex-1 ml-2 text-[0.5rem]">{{ item.name }}</div>
    <div class="time mr-2">{{ item.time }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ClockInUserType } from "@/types/clockInUser";
import { useForwardRef } from "@/hooks/useForwardRef";
import { getCurrentInstance } from 'vue'

const props = defineProps<{
  item: ClockInUserType;
}>();


const forwardRef = useForwardRef()
</script>
